<template>
    <!-- 页面容器 -->
    <view class="u-page">
        <!-- 演示块 -->
        <view class="u-demo-block">
            <!-- 内容容器 -->
            <view class="content-container">
                <!-- 文字容器 -->
                <view class="text-container">
                    <!-- 用户姓名 -->
                    <u-text text="张三" size="18" color="#333"></u-text>
                    <!-- 信息条目 -->
                    <view class="info-item">
                        <!-- 检测方 -->
                        <u-text
                            margin="0 0 8px 0"
                            text="检测方:市场"
                            size="14"
                            color="#666"
                        ></u-text>
                        <!-- 方检测项目 -->
                        <u-text
                            margin="0 0 8px 0"
                            text="方检测项目:农药残留"
                            size="14"
                            color="#666"
                        ></u-text>
                        <!-- 检测时间 -->
                        <u-text
                            margin="0 0 8px 0"
                            text="检测时间:2024/6/17 8:05:37"
                            size="14"
                            color="#666"
                        ></u-text>
                        <!-- 合格标志 -->
                        <view class="qualified">
                            <u-text
                                text="合格"
                                bold
                                size="17"
                                color="white"
                            ></u-text>
                        </view>
                    </view>
                </view>
                <!-- 图片容器 -->
                <view class="image-container">
                    <u-album :urls="urls1" keyName="src1" class="album"></u-album>
                </view>
            </view>
        </view>
		
		
		<view class="u-demo-block" style="margin-top: 20px;">
		    <!-- 内容容器 -->
		    <view class="content-container">
		        <!-- 文字容器 -->
		        <view class="text-container">
		            <!-- 用户姓名 -->
		            <u-text text="李四" size="18" color="#333"></u-text>
		            <!-- 信息条目 -->
		            <view class="info-item">
		                <!-- 检测方 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测方:市场"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 方检测项目 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="方检测项目:农药残留"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 检测时间 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测时间:2024/6/17 9:05:30"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 合格标志 -->
		                <view class="qualified">
		                    <u-text
		                        text="合格"
		                        bold
		                        size="17"
		                        color="white"
		                    ></u-text>
		                </view>
		            </view>
		        </view>
		        <!-- 图片容器 -->
		        <view class="image-container">
		            <u-album :urls="urls1" keyName="src2" class="album"></u-album>
		        </view>
		    </view>
		</view>
		
		
		<view class="u-demo-block" style="margin-top: 20px;">
		    <!-- 内容容器 -->
		    <view class="content-container">
		        <!-- 文字容器 -->
		        <view class="text-container">
		            <!-- 用户姓名 -->
		            <u-text text="王五" size="18" color="#333"></u-text>
		            <!-- 信息条目 -->
		            <view class="info-item">
		                <!-- 检测方 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测方:市场"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 方检测项目 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="方检测项目:农药残留"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 检测时间 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测时间:2024/6/17 7:23:37"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 合格标志 -->
		                <view class="qualified">
		                    <u-text
		                        text="合格"
		                        bold
		                        size="17"
		                        color="white"
		                    ></u-text>
		                </view>
		            </view>
		        </view>
		        <!-- 图片容器 -->
		        <view class="image-container">
		            <u-album :urls="urls1" keyName="src3" class="album"></u-album>
		        </view>
		    </view>
		</view>
		
		<view class="u-demo-block" style="margin-top: 20px;">
		    <!-- 内容容器 -->
		    <view class="content-container">
		        <!-- 文字容器 -->
		        <view class="text-container">
		            <!-- 用户姓名 -->
		            <u-text text="赵六" size="18" color="#333"></u-text>
		            <!-- 信息条目 -->
		            <view class="info-item">
		                <!-- 检测方 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测方:市场"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 方检测项目 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="方检测项目:农药残留"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 检测时间 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测时间:2024/6/17 12:15:37"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 合格标志 -->
		                <view class="qualified">
		                    <u-text
		                        text="合格"
		                        bold
		                        size="17"
		                        color="white"
		                    ></u-text>
		                </view>
		            </view>
		        </view>
		        <!-- 图片容器 -->
		        <view class="image-container">
		            <u-album :urls="urls1" keyName="src4" class="album"></u-album>
		        </view>
		    </view>
		</view>
		
		<view class="u-demo-block" style="margin-top: 20px;">
		    <!-- 内容容器 -->
		    <view class="content-container">
		        <!-- 文字容器 -->
		        <view class="text-container">
		            <!-- 用户姓名 -->
		            <u-text text="孙七" size="18" color="#333"></u-text>
		            <!-- 信息条目 -->
		            <view class="info-item">
		                <!-- 检测方 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测方:市场"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 方检测项目 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="方检测项目:农药残留"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 检测时间 -->
		                <u-text
		                    margin="0 0 8px 0"
		                    text="检测时间:2024/6/17 10:15:27"
		                    size="14"
		                    color="#666"
		                ></u-text>
		                <!-- 合格标志 -->
		                <view class="qualified">
		                    <u-text
		                        text="合格"
		                        bold
		                        size="17"
		                        color="white"
		                    ></u-text>
		                </view>
		            </view>
		        </view>
		        <!-- 图片容器 -->
		        <view class="image-container">
		            <u-album :urls="urls1" keyName="src5" class="album"></u-album>
		        </view>
		    </view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 图片数组
                urls1: [{
					src1:'https://big1eventtest.oss-cn-beijing.aliyuncs.com/%E7%94%98%E8%93%9D.png',
                    src2: 'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%8D%97%E6%B2%99/%E5%BA%99%E5%8D%97%E7%B2%89%E8%91%9B.png',
					src3: 'https://big1eventtest.oss-cn-beijing.aliyuncs.com/%E8%8A%B1%E8%8F%9C.png',
					src4: 'https://big1eventtest.oss-cn-beijing.aliyuncs.com/%E8%8F%A0%E8%8F%9C.png',
					src5: 'https://big1eventtest.oss-cn-beijing.aliyuncs.com/%E9%A6%99%E8%8F%9C.png'
                }]
            }
        }
    }
</script>

<style lang="scss">
    .u-page {
        padding: 20px;
    }

    .u-demo-block {
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
        overflow: hidden; 
    }

    .content-container {
        @include flex;
    }

    .text-container {
        flex: 1;
        margin-right: 20px;

        .info-item {
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
            white-space: nowrap; // 防止文字自动换行

            &:last-child {
                border-bottom: none;
                margin-bottom: 0;
            }

            u-text {
                &:after {
                    content: ": "; // 在冒号后添加空格
                }
            }
        }
    }

    .qualified {
        background-color: #67c23a; // 绿色背景
        border-radius: 3px; // 圆角
        padding: 5px 10px; // 内边距
        display: inline-block; // 行内块元素
    }

    .image-container {
        width: 200px; // 图片容器宽度
        max-width: calc(100% ); // 图片容器最大宽度
        margin-left: auto; // 图片容器靠右对齐

        .album {
            max-width: 100%; // 图片最大宽度
        }
    }
</style>
